<template>
  <div>
    <div class="drawer_screen" @click="drawerScreen"></div>
    <div class="drawer_box_ad">
      <div class="drawer_content_ad">
        <div style='font-size:16px;display:flex;justify-content:center;'>{{current_product.title}}</div>
        <div v-for="(item,index) in product_attrs" :key="index">
          <div style="color:#ABABAB;font-size:12px;padding-left:5px;">{{item.name}}</div>
          <div style='display:flex;flex-wrap:wrap;'>
            <div class="select-tab" v-for="(productAttr,idx) in item.product_attrs" :key="idx" :class="productAttr.checked?'select-active':''" @click='chooseSE(item,index,productAttr,idx)'>{{productAttr.name}}</div>
          </div>
        </div>
        <div class="select-price">
          <span v-if="(user.is_vip=='Y'&&current_product.vip_price!=0)">￥{{current_product.vip_price/100+attr_sum_price/100}}</span>
          <span v-if="!(user.is_vip=='Y'&&current_product.vip_price!=0)">￥{{current_product.original_price/100+attr_sum_price/100}}</span>
          <button class="btn-putIn" @click='addToCart()'>加入购物车</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      pro_attrs:[],
      attr_sum_price:0,
    }
  },
  computed: {
    ...mapGetters([
      'current_product',
      'product_attrs',
      'cart_list',
      'user'
    ])
  },
  methods: {
    ...mapActions([
      'setSeasoningStatus',
      'setProductAttrChecked',
      'clearProductAttrs',
      'setCartList',
      'setCupNumber',
      'setSumMonney'
    ]),
    chooseSE(product_attrs,index,product_attr,idx){
      if (this.pro_attrs.length == 0) {
        this.product_attrs[index].product_attrs[idx].checked = true
        this.pro_attrs.push(product_attr)
      }else {
        this.pro_attrs.forEach((item,itemIndex)=>{
          if (item.group_id == product_attr.group_id) {
            let nIndex
            this.product_attrs.every(productAttrs=>{
              nIndex = _.findIndex(productAttrs.product_attrs, { id: item.id})
              if (nIndex >= 0) {
                return false
              }
              return true
            })
            this.product_attrs[index].product_attrs[nIndex].checked = false
            this.pro_attrs.splice(itemIndex,1)
          }
        })
        this.product_attrs[index].product_attrs[idx].checked = true
        this.pro_attrs.push(product_attr)
      }
      this.setProductAttrChecked(this.product_attrs)
      //计算属性的总价格
      this.attr_sum_price = 0
      console.log('pro_attrs=>',this.pro_attrs)
      this.pro_attrs.forEach(item=>{
        this.attr_sum_price += item.price
      })
    },
    addToCart(){
      this.setSeasoningStatus(false)
      //调料的格式 加冰+牛奶
      let detail = ''
      for (var i = 0; i < this.pro_attrs.length; i++) {
        if (i ==0 ) {
          detail = this.pro_attrs[0].name
        }else {
          detail = detail + "+" + this.pro_attrs[i].name
        }
      }
      //计算总价格
      let sum_price = this.current_product.original_price
      console.log(this.current_product)
      if (this.user.is_vip=='Y'&&this.current_product.vip_price!=0){
        sum_price =this.current_product.vip_price
      }
      let attrs = []
      let attrs_price = 0
      this.pro_attrs.forEach(item=>{
        sum_price += item.price
        attrs_price += item.price
        attrs.push({id:item.id,name:item.name,price:item.price})
      })
      var addItem = {
        product_id:this.current_product.id,
        product_name:this.current_product.title,
        price:this.current_product.original_price,
        product_attrs:attrs,
        detail:detail,
        num:1,
        attrs_price:attrs_price,
        sum_price:sum_price,
        vip_price:this.current_product.vip_price,
      }
      //同一商品数量+1
      let judge = true
      if (this.cart_list.length == 0) {
        this.cart_list.push(addItem)
      } else {
        this.cart_list.forEach(item=>{
          if (item.product_id == addItem.product_id && item.detail == addItem.detail && item.price == addItem.price) {
            judge = false
            item.num += 1
            item.sum_price += addItem.sum_price
          }
        })
        if (judge) {
          this.cart_list.push(addItem)
        }
      }
      this.setCartList(this.cart_list)
      console.log('cart_list:',this.cart_list)

      //计算底部菜单的数量、总价格
      let cup_number = 0
      let sum_monney = 0
      this.cart_list.forEach(item=>{
        cup_number += item.num
        sum_monney += item.sum_price
      })
      this.setCupNumber(cup_number)
      this.setSumMonney(sum_monney)

      this.pro_attrs = [] //清空调料数组
      this.clearProductAttrs(this.product_attrs) // 调料数据第一个为选中状态
    },
    drawerScreen(){
      this.setSeasoningStatus(false)
      this.clearProductAttrs(this.product_attrs)
    },
  },
  mounted () {
    this.pro_attrs = []
    this.product_attrs.forEach(item=>{
      item.product_attrs.forEach((attr,index)=>{
        if (index == 0) {
          this.pro_attrs.push(attr)
        }
      })
    })
    //计算属性的总价格
    this.attr_sum_price = 0
    this.pro_attrs.forEach(item=>{
      this.attr_sum_price += item.price
    })
  }
}
</script>

<style >
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}
.drawer_box_ad {
  margin-left: 5%;
  width: 90%;
  overflow: hidden;
  position: fixed;
  top: 15%;
  z-index: 1001;
  background: #FFFFFF;
  border-radius: 10px;
}
.drawer_content_ad {
  width: 100%;
  padding: 15px;
}
.select-tab{
  padding:5px 8px;
  border:1px solid #ABABAB;
  font-size:15px;
  border-radius:5px;
  margin:5px;
  color:#ABABAB;
  z-index:1002;
}
.select-active{
  color:black;
  border:1px solid black;
}
.select-price{
  font-size:20px;
  color:#F05A86;
  margin-top:20px;
  display:flex;
  align-items: center;
  margin-left:10px;
}
.btn-putIn{
  height:30px;
  line-height: 30px;
  font-size:15px;
  background:black;
  color:white;
  margin-right: 30px;
}
</style>
